<template>
  <div class="y-conter">
    <!-- f-侧边栏 -->
    <!-- <div class="f-cebian">
      <a-menu
        style="width: 185px"
        :default-selected-keys="['1']"
        :default-open-keys="['sub1']"
        :mode="mode"
        :theme="theme"
      >
        <a-menu-item key="1" @click="renyuan(0)">企业信息</a-menu-item>
      </a-menu>
    </div> -->

    <div class="ren-view">
      <div class="nav">
        <h3>企业信息</h3>
        <div>
          <!-- <el-button class="y-btn1-right" type="primary" @click=" compile()">编辑</el-button> -->
        </div>
      </div>
      <div class="container">
        <div class="item1">
          <p>企业名称：墨于软件有限公司</p>
          <p>所在省市：</p>
          <p>注册资金：1111.1</p>
        </div>
        <div class="item2">
          <p>企业简称：墨于软件</p>
          <p>详细地址：南山区</p>
          <p>联系人：墨于</p>
        </div>
        <div class="item3">
          <p>企业类型：总承包单位</p>
          <p>法人代表：墨于</p>
          <p>联系电话：123456780</p>
        </div>
      </div>
      <div class="nav-bottom">
        <h3>企业认证信息</h3>
        <div>
          <!-- <el-button class="y-btn1-right" type="primary" @click=" compile()">编辑</el-button> -->
        </div>
      </div>
      <div class="container-2">
        <div class="item1">
          <p>组织名称：墨于软件</p>
          <p>营业执照上传:</p>
          <p><img class="y-img" src="../../static/img/M2Z`HO@I}OJ6NC7P8)WF8Q7.png" alt=""></p>
        </div>
        <div class="item2">
          <p>统一社会信用代码：1458369000000000</p>
        </div>
        <div class="item3">
        </div>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mode: "inline",
      theme: "light",
    };
  },
  methods: {
    //   框架
    changeMode(checked) {
      this.mode = checked ? "vertical" : "inline";
    },
    changeTheme(checked) {
      this.theme = checked ? "dark" : "light";
    },

    // 路由跳转
    renyuan(index) {
      let nameIndex = ["企业信息"];
      this.$router
        .push({
          name: nameIndex[index],
        })
        .catch((err) => err);
    },
  },
};
</script>
<style scoped>
/* 大容器样式 */
.y-conter {
  width: 100%;
  height: 658px;
  background-color: rgb(252, 252, 252);
}
/* 左侧导航 */
/* .f-cebian {
  width: 15.3%;
  height: 658px;
  background-color: lightcoral;
  float: left;
} */
/* 右侧内容 */
/* .ren-view {
  width: 84.7%;
  height: 658px;
  float: left;
  background-color: #eee;
} */

/* 企业信息样式 */
.nav {
  width: 100%;
  height: 80px;
  line-height: 60px;
  background-color: #fff;
  border: 1px solid #eee;
  display: flex;
  /* 决定主轴是水平的方向 */
  flex-direction: row-reverse;
  /* 项目在主轴剧左 */
  justify-content: flex-end;
  padding-top: 20px;
  padding-left: 30px;
  box-sizing: border-box;
}
h2,h3{
  font-weight: bold;
}
.y-img{
  width:30%;
  height: 30%;
  /* background-color: blue; */
  margin-left: -20px;
}
.nav-bottom{
 width: 100%;
  height: 80px;
  line-height: 60px;
  background-color: #fff;
  margin-top: 17px;
  border: 1px solid #eee;
  display: flex;
  /* 决定主轴是水平的方向 */
  flex-direction: row-reverse;
  /* 项目在主轴剧左 */
  justify-content: flex-end;
  padding-top: 20px;
  padding-left: 30px;
  box-sizing: border-box;
}
.container {
  display: flex;
  height: 180px;
  /* 会垂直对齐容器里的元素 */
  align-self: center;
  position: relative;
}
.container-2 {
  display: flex;
  height: 240px;
  /* 会垂直对齐容器里的元素 */
  align-self: center;
  position: relative;
}

.item1 {
  /* 分配空间项目的放大比例 */
  flex-grow: 1;
  flex-shrink: 0;
  text-align: left;
  padding-left: 30px;
  padding-top: 30px;
  background-color: #fff;
}

.item2 {
  flex-grow: 2;
  flex-shrink: 0;
  text-align: left;
  padding-left: 30px;
  padding-top: 30px;
  background-color: #fff;
}

.item3 {
  flex-grow: 2;
  flex-shrink: 0;
  text-align: left;
  padding-left: 30px;
  padding-top: 30px;
  background-color: #fff;
}
/* 按钮 */
.y-btn1-right {
  position: absolute;
  right: 0px;
  top: 100px;
}
</style>